<script setup name='PersonDemo1' lang="ts">
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

// 数据
let sum = ref(0)
// 方法
function changeSum() {
  sum.value += 1
}
console.log('setup')
// 生命周期钩子
onBeforeMount(()=>{
  console.log('挂载之前')
})
onMounted(()=>{
  console.log('挂载完毕')
})
onBeforeUpdate(()=>{
  console.log('更新之前')
})
onUpdated(()=>{
  console.log('更新完毕')
})
onBeforeUnmount(()=>{
  console.log('卸载之前')
})
onUnmounted(()=>{
  console.log('卸载完毕')
})
</script>
<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
<style scoped>

</style>